import React from 'react';
import { Row, Col } from 'antd';
import { history } from 'umi'
import classnames from 'classnames';
import styles from './styles.less';

const TopCard = ({ data = [] }) => {
    const handleLink = link => () => {
        if (link) {
            history.push(link);
        }
    };
    return (
        <Row gutter={12}>
            {data.map(item => (
                <Col span={6} className={styles.card}>
                    <div className={styles.infoBox}>
                        <p className={styles.text}>
                            <strong
                                onClick={handleLink(item.link)}
                                className={classnames({ [styles.link]: item.link })}
                            >
                                {item.value}
                            </strong>
                            {item.unit && <span className={styles.unit}>{item.unit}</span>}
                        </p>
                        <p className={styles.secondary}>{item.desc}</p>
                    </div>
                </Col>
            ))}
        </Row>
    );
};

export default TopCard;
